<!DOCTYPE html>
<html lang="en" xmlns:th=http://www.thymeleaf.org>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link th:href="@{/static/bootstrap/main/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/static/bootstrap/table/css/bootstrap-table.min.css}" rel="stylesheet"/>
    <link th:href="@{/static/bootstrap/fileinput/css/fileinput.min.css}" rel="stylesheet"/>
    <link rel="stylesheet"  th:href="@{/static/layui/css/layui.css}"  media="all">
    <script type="text/javascript">

    </script>
</head>
<body>
<div id="app">
    <h2>已部署流程列表</h2>
    <table id="mytable"></table>
    <div class="file-loading" >
        <input id="fileModel" name="fileModel" multiple type="file" class="file">
    </div>
</div>
</body>
<script th:src="@{/static/bootstrap/jquery/jquery-3.3.1.min.js}"></script>
<script th:src="@{/static/bootstrap/main/js/bootstrap.min.js}"></script>
<script th:src="@{/static/bootstrap/table/js/bootstrap-table.min.js}"></script>
<script th:src="@{/static/bootstrap/table/js/bootstrap-table-zh-CN.min.js}"></script>
<script th:src="@{/static/bootstrap/fileinput/js/fileinput.js}"></script>
<script th:src="@{/static/bootstrap/fileinput/locales/zh.js}"></script>
<!--<script th:src="@{/elementui/js/vue.js}"></script>-->
<script th:src="@{/static/layui/layui.js}"></script>
<script>
    var layer;
    layui.use('layer', function() { //独立版的layer无需执行这一句
        layer = layui.layer; //独立版的layer无需执行这一句
    });

    function openHtml(deploymentId){
        console.log(deploymentId);
    }
        window.operateEvents = {
            "click #fb" : function (e,value,row,index) {
                var id=row.deploymentId;
                $.ajax({
                    url:"/models/deployment/"+id,
                    type:"POST",
                    success:function(res){
                        alert(res);
                        location.reload();
                    }
                });
            },
            "click #dc" : function (e,value,row,index) {

            },
            "click #sc" : function (e,value,row,index) {
                var id=row.deploymentId;
                $.ajax({
                    url:"/models/delete/rmDeployment/"+id,
                    type:"POST",
                    success:function(res){
                        alert(res);
                        location.reload();
                    }

                });
            },
            "click #openPng" : function (e,value,row,index) {
                var id=row.deploymentId;
                var name = row.diagramResourceName;
                layer.open({
                    type: 1
                    ,offset: 'auto' //具体配置参考
                    ,id: 'layerDemo' //防止重复弹出
                    ,area: ['80%', '80%']
                    ,content: "<img src=\"../models/getDeploymentIdBpmnImgs/" +id + "?resourceName=" +  name + "\">"
                    ,btn: '关闭'
                    ,btnAlign: 'c' //按钮居中
                    ,shade: 0 //不显示遮罩
                    ,yes: function(){
                        layer.closeAll();
                    }
                });
            },
            "click #openXml" : function (e,value,row,index) {
                var id=row.deploymentId;
                var name = row.resourceName;
                layer.open({
                    type: 2
                    ,offset: 'auto' //具体配置参考
                    ,id: 'layerDemo' //防止重复弹出
                    ,area: ['80%', '80%']
                    ,content: "../models/getDeploymentIdBpmnXml/" +id + "?resourceName=" +  name
                    ,btn: '关闭'
                    ,btnAlign: 'c' //按钮居中
                    ,shade: 0 //不显示遮罩
                    ,yes: function(){
                        layer.closeAll();
                    }
                });
            },
            "click #bb" : function (e,value,row,index) {
                var pKey=row.pKey;
                layer.open({
                    type: 2
                    ,offset: 'auto' //具体配置参考
                    ,id: 'layerDemo' //防止重复弹出
                    ,area: ['98%', '80%']
                    ,content: "../models/activitiVersion/?key=" +  pKey
                    ,btn: '关闭'
                    ,btnAlign: 'c' //按钮居中
                    ,shade: 0 //不显示遮罩
                    ,yes: function(){
                        layer.closeAll();
                    }
                });
            }
        }

        $("#mytable").bootstrapTable({
            url:"/models/deploymentList",   //请求地址
            method:"get",
            striped : true, //是否显示行间隔色
            pageNumber : 1, //初始化加载第一页
            pagination : true,//是否分页
            sidePagination : 'server',//server:服务器端分页|client：前端分页
            pageSize : 5,//单页记录数
            pageList : [ 5, 10, 20],//可选择单页记录数
            showRefresh : true,//刷新按钮
            toolbar: "#toolbar",
            queryParams : function(params) {//上传服务器的参数
                var temp = {
                    page :params.offset + 0,// SQL语句起始索引
                    limit : params.limit  // 每页显示数量
                };
                return temp;
            },
            responseHandler: function(res){
                return {
                    "total":res.limit,
                    "rows" : res.data.records
                };
            },columns : [ {
                title : '部署id',
                field : 'deploymentId'
            },{
                title : '模型名称',
                field : 'dName',
            }, {
                title : '模型key',
                field : 'dKey',
            },{
                title : '流程实例名称',
                field : 'pName',
            }, {
                title : '流程实例key',
                field : 'pKey',
            }, {
                title : '版本',
                field : 'version',
                sortable : true
            },{
                title : '流程模型文件',
                field : 'resourceName',
                events: operateEvents,
                formatter: resourceNameHref
            },{
                title : '流程模型图片',
                field : 'diagramResourceName',
                events: operateEvents,
                formatter: diagramResourceNameHref
            },{
                title : '部署时间',
                field : 'deploymentTime',
                sortable : true,
                formatter: function (value, row, index) {
                    return changeDateFormat(value);
                },
            },{
                title : '流程状态',
                field : 'isSuspended',
                formatter: function (value, row, index) {
                    if (value) {
                        return "停用";
                    }else {
                        return "激活";
                    }
                },
            }, {
                field:'controller',
                title: '操作',
                width: 300,
                align: 'center',
                valign: 'middle',
                events: operateEvents,
                formatter: actionFormatter
            }],
            onLoadSuccess: function () {
            },
            onLoadError: function () {
            },
            onDblClickRow: function (row, $element) {
            },
        });

        /**
         * 按钮设置
         */
        function actionFormatter(value,row,index) {
            var button = "<button id='fb' type=\"button\" class=\"btn btn-primary\">停用</button>&nbsp;&nbsp;" +
                "<button id='bb' type=\"button\" class=\"btn btn btn-warning\">版本</button>&nbsp;&nbsp;";
            return  button;
        }

        /**
         *查看流程文件
         */
        function resourceNameHref(value,row,index){
            return "<a href='javascript:void(0);' id='openXml' class=\"font-blue\">" + value + "</a>"
        }

        /**
         *查看流程图片
         */
        function diagramResourceNameHref(value,row,index){
            return "<a href='javascript:void(0);' id='openPng' class=\"font-blue\">" + value + "</a>"
        }


        /**
         * 时间格式日期转换
         */
        function changeDateFormat(cellval) {
            if (cellval != null) {
                var date = new Date(cellval);
                var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
                var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();

                var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
                var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
                var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();

                return date.getFullYear() + "-" + month + "-" + currentDate + " " + hours + ":" + minutes + ":" + seconds;
            }
        }

   /* //初始化上传控件的样式
    $("#fileModel").fileinput({
        language: 'zh', //设置语言
        uploadUrl: "/models/fileModel", //上传的地址
        allowedFileExtensions: ['zip'],//接收的文件后缀
        showUpload: true, //是否显示上传按钮
        showCaption: true,//是否显示标题
        browseClass: "btn btn-primary", //按钮样式
        //dropZoneEnabled: false,//是否显示拖拽区域
        //minImageWidth: 50, //图片的最小宽度
        //minImageHeight: 50,//图片的最小高度
        //maxImageWidth: 1000,//图片的最大宽度
        //maxImageHeight: 1000,//图片的最大高度
        //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
        //minFileCount: 0,
        maxFileCount: 1, //表示允许同时上传的最大文件个数
        enctype: 'multipart/form-data',
        validateInitialCount:true,
        previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
    });

    //导入文件上传完成之后的事件
    $("#fileModel").on("fileuploaded", function (event, data, previewId, index) {
        var data = data.response;
        if (data.code == "3") {
            alert(data.message);
            return;
        }
        if (data.code == "1") {
            location.reload();
        }
    });*/
</script>
<style type="text/css">
    a {
        color: #337ab7;
    }
</style>
</html>